<template>
  <div>
    <el-space>
      <el-input v-model.trim="title" placeholder="请输入商品名称" />
      <el-input v-model.trim="id" placeholder="请输入团购ID" />
      <el-select placeholder="请选择团购状态" v-model="status">
        <el-option
          v-for="item in grouppurchase"
          :label="item.title"
          :value="item.value"
          :key="item.value"
        />
      </el-select>
      <el-button
        type="primary"
        class="iconfont icon-sousuo"
        @click="group()"
        >查找</el-button
      >
      <el-button
        type="primary"
        class="iconfont icon-tianjia"
        @click="addCoupons()">添加</el-button
        
      >
    </el-space>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="expand">
        <template #default="props">
          <p>类目ID {{ props.row.spuId }}</p>
          <p>
            商品Sku属性
            <el-table
              :data="props.row.groupShopSkuDTOList"
              border
              style="width: 100%"
            >
              <el-table-column prop="skuId" label="skuid" align="center" />
              <el-table-column prop="title" label="规格标签" align="center" />
              <el-table-column
                prop="skuGroupShopPrice"
                label="团购价格(元)"
                align="center"
              />
              <el-table-column prop="stock" label="库存" align="center">
                <template #default="scope">
                  <div>{{ scope.row.stock }}(件)</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="originalPrice"
                label="原始价格(元)"
                align="center"
              />
              <el-table-column
                prop="price"
                label="售卖价格(元)"
                align="center"
              />
              <el-table-column
                prop="vipPrice"
                label="会员价格(元)"
                align="center"
              />
              <el-table-column prop="barCode" label="国际条码" align="center" />
            </el-table>
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="团购ID" width="80" align="center" />
      <el-table-column
        prop="categoryId"
        label="商品ID"
        width="100"
        align="center"
      />
      <el-table-column
        prop="title"
        label="商品名称"
        align="center"
        width="460"
      />
      <el-table-column
        prop="address"
        label="商品主图"
        align="center"
        width="100"
      >
        <template #default="scope">
          <el-popover
            width="500"
            placement="right"
          >
            <template #reference>
              <el-image :src="scope.row.img"></el-image>
            </template>
            <img
              :src="scope.row.img"
              style="max-height: 200px; max-width: 300px"
            />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="未满策略"
        align="center"
        width="100"
      >
        <template #default="scope">
          <el-tag type="warning">{{ scope.row.automaticRefund==1?'发货':'不发货' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="活动状态"
        align="center"
        width="100"
      >
        <template #default="scope">
          <el-tag :type="scope.row.status == 0 ? 'primary' : 'warning'">{{
            scope.row.status == 0 ? "冻结" : "进行"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="gmtStart"
        label="开始时间"
        align="center"
        :formatter="starttime"
        width="170"
      />
      <el-table-column
        prop="gmtEnd"
        label="结束时间"
        align="center"
        :formatter="finishtime"
        width="170"
      />
      <el-table-column
        prop="sales"
        label="当前人数"
        align="center"
        width="100"
      />
      <el-table-column
        prop="minNum"
        label="目标人数"
        align="center"
        width="100"
      />
      <el-table-column label="操作" align="center" width="200">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            @click="editor(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row,scope.$index,)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 左侧抽屉 -->
    <el-drawer v-model="table" :title="biaoti" direction="ltr" size="50%">
      <el-card class="box-card">
        <h5>商品属性spu</h5>
        <div class="example-block">
          <span class="example-demonstration">团购商品</span>
          <el-cascader
            v-model="from.spuId"
            :options="options"
            :props="props1"
            clearable
            placeholder="团购商品"
            @change="hodds"
          />
        </div>
        <div class="block">
          <el-config-provider :locale="locale" @change="shows()">
            <span class="demonstration">团购时间</span>
            <el-date-picker
              v-model="from.gmtStart"
              type="datetime"
              placeholder="请选择日期时间"
              value-format="x"
              format="YYYY-M-DD-HH:mm:ss"
            />
            <a>至</a>
            <el-date-picker
              v-model="from.gmtEnd"
              type="datetime"
              placeholder="请选择日期时间"
              value-format="x"
              format="YYYY-M-DD-HH:mm:ss"
            />
          </el-config-provider>
        </div>
        <div>
          <span class="example-demonstration">团购基础人数</span>
          <el-input-number
            v-model.Mumber="from.minNum"
            :min="1"
            class="mx-4"
            controls-position="right"
          />
        </div>
        <div>
          <div class="notyet">活动结束后人数没有达到基础人数采取：</div>
          <el-button-group v-model="from.automaticRefund " size="large">
            <el-button :type="from.automaticRefund?'primary':''" @click="from.automaticRefund=1">不退款,我要发货</el-button>
            <el-button :type="from.automaticRefund?'':'primary'" @click="from.automaticRefund=0">自动退款,我不发货</el-button>
          </el-button-group>
        </div>
      </el-card>
      <!-- 卡片二 -->
      <el-card>
        <template #header>
          <div>
            <span>商品类型(sku)</span>
            <!-- 团购价格修改弹出框 -->
            <el-popover placement="right" :width="400" trigger="click"  v-model:visible="visible">
              <template #reference>
                <el-button type="primary" plain @click="pricing" style="margin-left: 460px">批量定价</el-button>
              </template>
              <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                status-icon
                :rules="rules"
                label-width="120px"
                class="demo-ruleForm"
              >
                <el-form-item label="团购价格" prop="pass">
                  <el-input-number
                    v-model="price"
                    controls-position="right"
                    size="large"
                  />
                  <span>元</span>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm"
                    >取消</el-button
                  >
                  <el-button @click="resetForm()">确定</el-button>
                </el-form-item>
              </el-form>
            </el-popover>
          </div>
        </template>
        <!-- 表格 -->
        <el-table :data="dataer" style="width: 100%">
          <el-table-column prop="id" label="Skuld" />
          <el-table-column prop="barCode" label="sku条形码" width="140" />
          <el-table-column prop="title" label="类型名" width="150" />
          <el-table-column prop="stock" label="库存" />
          <el-table-column prop="price" label="现价/元" />
          <el-table-column prop="skuGroupShopPrice" label="团购价格/元"  />
          <el-table-column prop="address" label="操作">
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                @click="handleEdit(scope.row)"
                >更新</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
       <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">确定</el-button>
      </div>
    </template>
    </el-drawer>
    <!-- 更新对话框 -->
    <el-dialog v-model="updates" title="团购价格" width="30%" >
        <el-form ref="ruleFormRef" :model="arrs" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
          <el-form-item label="团购价格" prop="skuGroupShopPrice">
            <el-input-number v-model="arrs.skuGroupShopPrice"   controls-position="right" size="large" /><span>元</span>
          </el-form-item>
          <el-form-item label="现价" prop="price">
            <span>{{this.arrs.price}}</span>
          </el-form-item>
          <el-form-item label="sku类型名" prop="pass">
            <span>{{this.arrs.title}}</span>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="updates = false">取消</el-button>
            <el-button type="primary" @click="dinne()">确定</el-button>
          </span>
        </template>
  </el-dialog>
    <!-- 分页组件 -->
    <PaginAtion
      class="dins"
      v-bind="paging"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
    </PaginAtion>
  </div>
</template>
<script>
  import moment from "moment";
  import http from "@/http";
  import PaginAtion from "@/Subassembly/PaginAtion";
  import zhCn from "element-plus/lib/locale/lang/zh-cn";
  import { ElMessage } from "element-plus";
  export default {
    components: {
      PaginAtion,
    },
    data() {
      return {
        price:"",
        title:"",
        biaoti:"添加",
        updates:false,
        radio1: 1,
        visible: false,
        locale: zhCn,
        num: 1,
        table: false,
        tableData: [],
        id: "",
        spuName: "",
        status: "",
        dataer:[],

        options: [], //接收类目
        //商品级联组件
        props1: {
          children: "children",
          label: "label",
          value: "id",
          checkStrictly: true,
          emitPath: false,
        },
        //数据
        from:{
            id:"",
            spuId:"",
            gmtStart:"", //团购开始时间戳
            gmtEnd:"",   //团购结束时间戳
            minNum:1,   //团购最低人数
            automaticRefund:0, //团购人数未满是否自动退款
            groupShopSkuList:[], //团购sku链表
        },
        //分页
        paging: {
          page: 1, //默认第一页
          limit: 10, //显示一行几页
          total: "", //总页
        },

        //团购
        grouppurchase: [
          { value: 0, title: "冻结" },
          { value: 1, title: "进行" },
        ],
        //更新团购价格
        arrs:{
            skuGroupShopPrice:0,
            price:0,
            title:"",
        }
      };
    },
    created() {
      this.group();
      this.dows(); //商品
    },
    
    methods: {
      //数据
      group() {
        let data = {
          _gp: "admin.groupshop",
          _mt: "list",
          id: this.id,
          spuName: this.spuName,
          status: this.status,
          page: this.paging.page,
          limit: this.paging.limit,
        };
        http.post(data).then((res) => {
          console.log(res);
          this.tableData = res.data.items;
          this.paging.total = res.data.total;
        });
      },
      // shows(){
      //   if(this.from.gmtStart<this.from.gmtEnd){
      //     ElMessage.error("开始时间不能小于团购时间！")
      //   }
      // },
      //批量价格确定
      resetForm(){
        if(this.price>0){
          // console.log(this.from.groupShopSkuList,this.dataer);
          this.dataer.forEach(item=>{
              item.skuGroupShopPrice = this.price
          })
        }
          this.visible = false
      },
      //编辑
      editor(item){
        // console.log(item);
        this.table = true  //弹出框显示
        this.biaoti = "修改"
        Object.assign(this.from,{
            id:item.id,
            spuId:item.spuId,
            gmtStart:item.gmtStart, //团购开始时间戳
            gmtEnd:item.gmtEnd,   //团购结束时间戳
            minNum:item.minNum,   //团购最低人数
            automaticRefund:item.automaticRefund, //团购人数未满是否自动退款//团购sku链表
            groupShopSkuList:[],
        })
        this.dataer = item.groupShopSkuDTOList
        let arr = []
        this.dataer.forEach(row=>{
          row.price = row.skuGroupShopPrice
          arr.push({
            skuId:row.id,
            skuGroupShopPrice:row.skuGroupShopPrice   
          })
        })
        this.from.groupShopSkuList = arr
      },
      //change事件
      hodds(item){
        console.log(item);
        let datas = {
             _gp:"product",
              _mt:"getProduct",
              spuId:item
        }
        http.post(datas).then((res)=>{
          console.log(res);
          //将商品类型sku赋值给新定义的数组
          this.dataer = res.data.skuList
          
        })
      },
      //更新
      handleEdit(row){
        Object.assign(this.arrs,row);
        this.updates = true

      },
      //更新确定按钮
      dinne(){
        this.dataer.forEach(item=>{
            if(item.id==this.arrs.id){
              item.skuGroupShopPrice = this.arrs.skuGroupShopPrice
            }
        })
        
        this.updates = false
      },
      //添加弹出框
      addCoupons(row) {
        this.table = true;
        this.biaoti = "添加"
        this.from = {}
        this.dataer = []

        
      },
      //商品树
      dows() {
        let dows = {
          _gp: "admin.product",
          _mt: "getSpuBigTree",
        };
        http.post(dows).then((res) => {
          this.options = res.data;
        });
      },
      //创建或者编辑
      confirmClick(){
          if(this.from.spuId==""){
            return ElMessage.error("团购不能为空!")
          }
          if(this.from.gmtStart==""){
            return ElMessage.error("开始时间不能为空!")
          }
          if(this.from.gmtEnd==""){
            return ElMessage.error("结束时间不能为空！")
          }
          if(this.from.minNum==""){
            return ElMessage.error("团购人数不能为空！")
          }
          let arr = []
          this.dataer.forEach(item=>{
              arr.push({
                skuId:item.id,
                skuGroupShopPrice:item.skuGroupShopPrice
              })
          })
          console.log(arr,this.dataer);
          if(this.biaoti=="添加"){
            this.from.groupShopSkuList = JSON.stringify(arr)
          let datas = {
              _gp:"admin.groupshop",
              _mt:"create",
              ...this.from,
          }
          http.post(datas).then((res)=>{
              console.log(res);
              if(200==res.errno){
                  ElMessage.success("添加成功！")
                  this.table = false
                  this.from = this.$options.data().from;
                  this.group();
              }else{
                  ElMessage.error("添加失败")
              }
          })
          //编辑
          }else{
            this.from.groupShopSkuList = JSON.stringify(arr)
             let eads = {
               _gp:"admin.groupshop",
               _mt:"edit",
               ...this.from
             }
             http.post(eads).then((res)=>{
               console.log(res);
               if(200==res.errno){
                 ElMessage.success("编辑成功!")
                 this.table = false
                 this.from = this.$options.data().from;
                 this.group();
               }else{
                 ElMessage.error("编辑失败！")
               }
             })
          }
          
      },
      //删除
      handleDelete(row,index){
          // console.log(row.id);
          let deletes = {
            _gp:"admin.groupshop",
            _mt:"delete",
            id:row.id
          }
          http.post(deletes).then((res)=>{
            console.log(res);
            if(200==res.errno){
              this.tableData.splice(index,1)
              ElMessage.success("删除成功！")
                
            }else{
              ElMessage.success("删除失败！")
            }
          })
      },
      pricing() {
        this.visible = true;
      },
      submitForm(){
        this.visible = false
      },
      starttime(row, column) {
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY-M-DD-HH:mm:ss");
      },
      finishtime(row, column) {
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY-M-DD-HH:mm:ss");
      },
      //分页
      handleSizeChange(val) {
        this.paging.limit = val;
        this.group();
      },
      handleCurrentChange(val) {
        this.paging.page = val;
        this.group();
      },
    },
  };
</script>
<style lang="less" scoped>
  h5 {
    padding: 0px;
    margin: 0px;
  }
  .el-image {
    width: 40px;
    height: 40px;
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 720px;
  }
  .box-card {
    span {
      display: inline-block;
      width: 160px;
      line-height: 50px;
    }
    .notyet {
      float: left;
      width: 150px;
      height: 30px;
      line-height: 30px;
    }
    .el-radio-group {
      margin-top: 12px;
      margin-left: 9px;
    }
    .ads {
      span {
        width: 150px;
        background-color: aqua;
      }
    }
  }
</style>
